import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Tabs, message } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import { urlParse, formatNumber } from '@/utils/utils';
import styles from '@/utils/utils.less';
import BillDetails from './BillDetail';

const { Description } = DescriptionList;
const { TabPane } = Tabs;

@connect(({ supplybilling, loading }) => ({
  supplybilling,
  loading: loading.models.supplybilling,
}))
@Form.create()
class BasicList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      billId: '',
      detailInfo: {},
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { billId } = this.state;
    const billIds = urlParse(location.search).billId || billId;
    // 获取详情
    dispatch({
      type: 'supplybilling/billInformation',
      payload: { billId: billIds },
    }).then(res => {
      if (res.success && res.data) {
        this.setState({
          billId: billIds,
          detailInfo: res.data,
        });
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
    });
  }

  // 返回
  closeDetail = () => {
    router.push('/chargemanage/supplybilling/index');
  };

  render() {
    const { detailInfo, billId } = this.state;
    return (
      <PageHeaderWrapper>
        <Card style={{ marginBottom: 24 }} bordered={false} className={styles.tabCard}>
          <Tabs defaultActiveKey="1">
            <TabPane tab="账单信息" key="1">
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="签约方">{detailInfo.sendSuppName || '--'}</Description>
                <Description term="账单年月">
                  {detailInfo.billYm
                    ? `${detailInfo.billYm
                        .toString()
                        .substr(0, 4)}-${detailInfo.billYm.toString().substr(4, 5)}`
                    : '--'}
                </Description>
                <Description term="账单金额">
                  {detailInfo.billAmo === 0
                    ? 0
                    : (detailInfo.billAmo && formatNumber(detailInfo.billAmo)) || '--'}
                </Description>
                <Description term="涉及人数">
                  {detailInfo.involvePersonNum === 0
                    ? `${detailInfo.involvePersonNum}`
                    : detailInfo.involvePersonNum || '--'}
                </Description>
                <Description term="服务费">
                  {detailInfo.othCost === 0
                    ? `${detailInfo.othCost}`
                    : formatNumber(detailInfo.othCost) || '--'}
                </Description>
                <Description term="福利费">
                  {detailInfo.bnftAmo === 0
                    ? `${detailInfo.bnftAmo}`
                    : formatNumber(detailInfo.bnftAmo) || '--'}
                </Description>
                <Description term="体检费">
                  {detailInfo.medExamAmo === 0
                    ? `${detailInfo.medExamAmo}`
                    : formatNumber(detailInfo.medExamAmo) || '--'}
                </Description>
                <Description term="保险费用">
                  {detailInfo.cmpinsAmo === 0
                    ? `${detailInfo.cmpinsAmo}`
                    : formatNumber(detailInfo.cmpinsAmo) || '--'}
                </Description>
                <Description term="风险金">
                  {detailInfo.riskAmo === 0
                    ? `${detailInfo.riskAmo}`
                    : formatNumber(detailInfo.riskAmo) || '--'}
                </Description>
                <Description term="代收社保">
                  {detailInfo.agtsrvIns === 0
                    ? `${detailInfo.agtsrvIns}`
                    : formatNumber(detailInfo.agtsrvIns) || '--'}
                </Description>
                <Description term="代收公积金">
                  {detailInfo.agtsrvAccu === 0
                    ? `${detailInfo.agtsrvAccu}`
                    : formatNumber(detailInfo.agtsrvAccu) || '--'}
                </Description>
                <Description term="代收工资">
                  {detailInfo.agtsrvWage === 0
                    ? `${detailInfo.agtsrvWage}`
                    : formatNumber(detailInfo.agtsrvWage) || '--'}
                </Description>
                <Description term="个人所得税">
                  {detailInfo.taxblAmo === 0
                    ? `${detailInfo.taxblAmo}`
                    : formatNumber(detailInfo.taxblAmo) || '--'}
                </Description>
                <Description term="账单状态">{detailInfo.billStateName || '--'}</Description>
                <Description term="确认收费人员">{detailInfo.chrgName || '--'}</Description>
                <Description term="确认收费时间">
                  {(detailInfo &&
                    detailInfo.chrgTime &&
                    moment(detailInfo.chrgTime).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description>
                <Description term="账单生成时间">
                  {(detailInfo &&
                    detailInfo.creTime &&
                    moment(detailInfo.creTime).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description>
              </DescriptionList>
            </TabPane>
            <TabPane tab="账单明细" key="2">
              <BillDetails comment={billId} />
            </TabPane>
          </Tabs>
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.closeDetail}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

const ListSearchForm = Form.create()(BasicList);
export default ListSearchForm;
